<template>
    <div class="content-box">
        <div class="serchBox clearfix">
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
            </easyForm>
        </div>
        <div class="containerBox">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeadernew"
                    :key="index"
                    :fixed="item.fixed"
                    :width="item.width"
                    :type="item.type"
                    :min-width="item.minWidth"
                    :formatter='item.formatter'
                >
                </el-table-column>
                <el-table-column label="操作" width="260" fixed="right" align="center">
                    <template #default="scope">
                        <el-button size="small" link type="primary" @click="completeOrder(scope.$index, scope.row)">完成咨询</el-button>
                        <el-button size="small" link type="primary" @click="editOrder(scope.$index, scope.row)">修改预约</el-button>
                        <el-button size="small" link type="danger" @click="cancelOrder(scope.$index, scope.row)">取消预约</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box">
                <v-pagination :pagesize="query.limit"
                    :total="pageTotal"
                    :options="query"
                    :render="getData">
	            </v-pagination>
            </div>
        </div>
    </div>
    <el-dialog v-model="completeOrderFlag" title="完成咨询" center width="700px">
        <p class="topP">确认实际咨询时段 <el-button link type="primary" class="rightFloat" @click="nobodySure">来访者未到场</el-button></p>
        <br>
        <el-form :model="completeForm" inline="true">
            <el-form-item  :label-width="formLabelWidth">
                <el-date-picker
                    v-model="searchDate"
                    type="date"
                    placeholder="选择日期"
                />
            </el-form-item>
            <el-form-item >

                <el-time-picker
                    v-model="searchTime"
                    is-range
                    range-separator="-"
                    start-placeholder="选择开始时间"
                    end-placeholder="选择结束时间"
                    />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="completeOrderFlag = false">取消</el-button>
                <el-button type="primary" @click="completeOrderFlag = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref , reactive, h} from 'vue'
import { ElMessage, ElMessageBox, FormInstance, } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import vPagination from '@/components/pagenation/index.vue'

import { useRouter } from "vue-router";
import {useStore} from "vuex";


const store = useStore();
const router = useRouter();

const formList = {
    base: [
        { label: '预约时间', field: 'date', type:'date', },
        { label: '', field: 'type', type:"select",placeholder: '预约状态',
            options: { data: [
            { label: '待确认', value: 1 }, 
            { label: '待咨询', value: 2 },
            { label: '已咨询', value: 3 },
            { label: '已取消', value: 4 },
            { label: '待支付', value: 5 },
            { label: '待填写信息', value: 6 },] } },
        { label: '', field: 'style', type:"select",placeholder: '咨询师类型',
            options: { data: [
            { label: '无', value: 1 },
            { label: '咨询师', value: 2 },
            { label: '服务师', value: 3 },
            { label: '实习咨询师', value: 4 },
            { label: '新手咨询师', value: 5 },
            { label: '成熟咨询师', value: 6 },
            { label: '资深咨询师', value: 7 },
            { label: '督导师', value: 8 },
            { label: '资深督导师', value: 9 }, ] } },
        { label: '', field: 'Id', placeholder: '关联订单号' },
        { label: '', field: 'Id', placeholder: '预约订单号' },
        { label: '', field: 'Id', placeholder: '提现ID' },
        { label: '', field: 'Id', placeholder: '咨询师姓名' },
        { label: '', field: 'Id', placeholder: '用户ID' },
        { label: '', field: 'Id', placeholder: '来访者姓名/手机' },

        { label: '', field: 'from', type:"select",placeholder: '咨询类型',
            options: { data: [
            { label: '普通咨询', value: 1 }, 
            { label: '即时咨询', value: 2 },] } },
        { label: '', field: 'countState', type:"select",placeholder: '取消类型',
            options: { data: [
            { label: '后台取消', value: 1 },
            { label: '咨询师取消', value: 2 },
            { label: '用户取消', value: 3 },
            { label: '系统取消', value: 4 }, ] } },
    ],
}
const fieldList: Form.FieldItem[] = formList.base;
console.log(fieldList)
const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    downloadButtonText: '导出表格',
    showResetButton: true,
    showDownloadButton: true,
    showSubmitButton:true,
};

const completeOrderFlag = ref(false)
const completeForm = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const searchDate = ref('');
const searchTime = ref('');
// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag: true,
        size:'small',
        count: '',
        content: '',
        date:''
    })
// 表格内容
let tableLayout = ref('fixed')
let tableHeader = [
    {
        label:"用户姓名",
        width: 120,
        name:"name",
        fixed:'left'
    },
    {
        label:"用户标签",
        width: 100,
        name:"name",
        fixed:'left'
    },
    {
        label:"联系手机",
        width: 200,
        name:"telPhone",
        fixed:'left'
    },
    {
        label:"咨询师姓名",
        name:"content",
        width: 120
    },
    {
        label:"咨询服务ID",
        name:"counselor_id",
        width: 120
    },
    {
        label:"机构首单",
        name:"content",
        width: 120
    },
    {
        label:"咨询师首单",
        name:"content",
        width: 120
    },
    {
        label:"分成类型",
        name:"content",
        width: 120
    },
    {
        label:"订单编号",
        name:"content",
        width: 120
    },
    {
        label:"总预约次数",
        name:"content",
        minWidth: 130
    },
    {
        label:"已完成预约数量",
        name:"content",
        minWidth: 130
    },
    {
        label:"订单状态",
        name:"content",
        minWidth: 130
    },
    {
        label:"订单类型",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"下单时间",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"支付状态",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"支付金额（元）",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"优惠金额（元）",
        name:"content",
        minWidth: 130
    },
    {
        label:"优惠类型",
        name:"content",
        minWidth: 130
    },
    
    {
        label:"渠道标识",
        name:"content",
        minWidth: 130
    },
    {
        label:"申请取消订单原因",
        name:"content",
        minWidth: 130
    },
]
let tableHeadernew = [
    {
        label:"用户姓名",
        width: 120,
        name:"customer_name",
        fixed:'left'
    },
    {
        label:"咨询师姓名",
        width: 120,
        name:"counselor_name",
    },
    {
        label:"咨询服务ID",
        minWidth: 140,
        name:"id",
    },
    {
        label:"创建时间",
        minWidth: 160,
        name:"creat_time",
    },
    {
        label:"预约时间",
        minWidth: 160,
        name:"reservation_time",
    },
    {
        label:"咨询时间",
        minWidth: 160,
        name:"consult_time",
    },
    {
        label:"预约状态",
        width: 120,
        name:"state",
        formatter: (row:any) => {
            let name = '';
            if(row.state == 1 ){
                name = '待支付'
            }else if(row.state == 2){
                name = '待确认'
            }else if(row.state == 3){
                name = '待咨询'
            }else if(row.state == 4){
                name = '已咨询'
            }else if(row.state == 5){
                name = '已取消'
            }
            return h(
                'span',
                row.username = name
            )
        }
    },
    {
        label:"咨询方式",
        width: 120,
        name:"type",
        formatter: (row:any) => {
            let name = '';
            if(row.type == 1 ){
                name = '视频'
            }else if(row.type == 2){
                name = '面对面'
            }
            return h(
                'span',
                row.username = name
            )
        }
    },
    {
        label:"关联订单号",
        minWidth: 120,
        name:"order_id",
    },
    {
        label:"取消类型",
        width: 120,
        name:"cancell_type",
        formatter: (row:any) => {
            return h(
                'span',
                row.username === 'cancell_type == 1' ? '用户取消' : '后台取消'
            )
        }
    },
    {
        label:"取消原因",
        minWidth: 120,
        name:"cancell_reason",
    },
    {
        label:"腾讯会议号",
        minWidth: 120,
        name:"meeting_number",
    },
]
let tableData = [{
        id:2323,
        customer_id: "1",
        customer_name: "测试用户",
        counselor_id: "1",
        counselor_name: "测试咨询师",
        creat_time: "2022-12-12 12:12:12",
        reservation_time: "2022-14-14 14:14:14",
        consult_time: "2022-16-16 16:16:16",
        state: '1',
        type: '1',
        order_id: '121212',
        cancell_type: '1',
        cancell_reason: '',
        meeting_number: '122222222'

      }, {
        id:2323,
        customer_id: "1",
        customer_name: "测试用户",
        counselor_id: "1",
        counselor_name: "测试咨询师",
        creat_time: "2022-12-12 12:12:12",
        reservation_time: "2022-14-14 14:14:14",
        consult_time: "2022-16-16 16:16:16",
        state: '2',
        type: '2',
        order_id: '121212',
        cancell_type: '2',
        cancell_reason: '',
        meeting_number: '122222222'
      }, {
        id:2323,
        customer_id: "1",
        customer_name: "测试用户",
        counselor_id: "1",
        counselor_name: "测试咨询师",
        creat_time: "2022-12-12 12:12:12",
        reservation_time: "2022-14-14 14:14:14",
        consult_time: "2022-16-16 16:16:16",
        state: '3',
        type: '2',
        order_id: '121212',
        cancell_type: '1',
        cancell_reason: '',
        meeting_number: '122222222'
      }, {
        id:2323,
        customer_id: "1",
        customer_name: "测试用户",
        counselor_id: "1",
        counselor_name: "测试咨询师",
        creat_time: "2022-12-12 12:12:12",
        reservation_time: "2022-14-14 14:14:14",
        consult_time: "2022-16-16 16:16:16",
        state: '4',
        type: '2',
        order_id: '121212',
        cancell_type: '1',
        cancell_reason: '',
        meeting_number: '122222222'
      }]
// 分页数据
const  pageTotal = ref(6),//总条数
    query = reactive({//配置对应的查询参数
        appTimeStart:'',
        appTimeEnd:'',
        page: 1,
        limit:10,//page第几页,limit是一页几个
    });
// 搜索按钮
let search = (searchCon: any,formRef: any) => {
    console.log(searchCon)
    console.log(formRef)
}
// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const completeOrder = (index: number, row: any) => {
    console.log('完成咨询')
    completeOrderFlag.value = true;
}

const editOrder = (index: number, row: any) => {
    // console.log(row)
    let tagsItem = {
        "component": () => import("@/views/consultingMana/consultingDetail.vue"),
            "path": "/consultingDetail",
            "name":"consultingDetail",
            "meta":{
                "icon": "Monitor",
                "name": "修改预约信息-" + row.id,
                "id":row.id
            },
    }
    router.push({name: 'consultingDetail',query:{id:row.id}});
    store.dispatch("ADD_TAG", tagsItem)
}
const cancelOrder = (index: number, row: any) => {
    ElMessageBox.confirm(
    '取消预约后，无法恢复，确定要取消吗?',
    '温馨提示',
    {
      confirmButtonText: '确定取消',
      cancelButtonText: '关闭',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      
    })
}
const nobodySure = () => {
    ElMessageBox.confirm(
    '确认来访者未到场吗？',
    '友情提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      
    })
}
// 获取详情
const getData = () => {

}
</script>
<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
.topP{
    font-size: 16px;
    margin: 10px 0;
    span{
        font-size: 14px;
        color: #409EFF;
    }
}
</style>